import React, { useState, useEffect, useRef } from 'react'
import { Outlet, useNavigate } from 'react-router-dom'
import './discover.css'
import { NavBar, Space, Toast, Button, Swiper, List, Switch } from 'antd-mobile'
import {
  SearchOutline,
  UnorderedListOutline,
} from 'antd-mobile-icons'
export default function Discover() {

  const navigate = useNavigate()

  const back = () =>
    Toast.show({
      content: '点击了返回区域',
      duration: 1000,
    })

  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ '--gap': '1.6rem' }}>
        <SearchOutline />
      </Space>
    </div>
  )

  const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
  const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
      <div
        className='discover-content-img'
        style={{ background: color }}
        onClick={() => {
          Toast.show(`你点击了卡片 ${index + 1}`)
        }}
      >
        {index + 1}
      </div>
    </Swiper.Item>
  ))


  return (
    <div className='discover'>
      <div className="discover-header">
          <NavBar right={right} onBack={back}>
            发现
          </NavBar>
      </div>
      <div className="discover-content">
        <div className="discover-content-1">
          <Swiper
            loop
            autoplay
          >
            {items}
          </Swiper>
          <div className="custom-list-container">
            <List style={{ border: 'none' }}>
              <List.Item
                prefix={<UnorderedListOutline />}
                onClick={() => { 
                  navigate('/party-layout/partyHome')
                }}
                style={{ backgroundColor: '#191919', color: 'white' }}
              >
                吃喝玩乐
              </List.Item>
              <List.Item
                prefix={<UnorderedListOutline />}
                onClick={() => {
                  navigate('/activity')
                 }}
                style={{ backgroundColor: '#191919', color: 'white' }}
              >
                活动
              </List.Item>
            </List>
          </div>

        </div>

      </div>
    </div>
  )
}
